<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>第一篇Hexo blog文章 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Hexo+gitee：30分钟搭建一个自己的个人博客网站 欢迎友链呀＜(▰˘◡˘▰)分类专栏： 项目实战篇 文章标签： git Hexo nodejs 本文链接：https:&#x2F;&#x2F;blog.csdn.net&#x2F;weixin_42365530&#x2F;article&#x2F;details&#x2F;107750003 订阅专栏   Hexo + Gitee 部署自己的个人博客  目前市场上比较火的">
<meta property="og:type" content="article">
<meta property="og:title" content="第一篇Hexo blog文章">
<meta property="og:url" content="http://example.com/2024/03/17/%E7%AC%AC%E4%B8%80%E7%AF%87Hexo-blog%E6%96%87%E7%AB%A0/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Hexo+gitee：30分钟搭建一个自己的个人博客网站 欢迎友链呀＜(▰˘◡˘▰)分类专栏： 项目实战篇 文章标签： git Hexo nodejs 本文链接：https:&#x2F;&#x2F;blog.csdn.net&#x2F;weixin_42365530&#x2F;article&#x2F;details&#x2F;107750003 订阅专栏   Hexo + Gitee 部署自己的个人博客  目前市场上比较火的">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200250982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200636724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200739294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200820716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200859628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802200937295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201048569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201113758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201146107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201219532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/2020080220131539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201344312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201407831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/202008022014338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201510794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/2020080220154554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201608536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201649173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201726963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200802201812780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9OTmtUcUtvNmsxcHNaV0V4QVV4T2liUm42YzhJUThBNGNpYnkzZE5Pek1qaWM1MlhCeDZIeDk1QkxMT3JYWUZveUNaUEhQcWRnYjU0WGVhNlBvaWJ4Ym1vd0EvNjQw?x-oss-process=image/format,png#pic_center">
<meta property="og:image" content="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9OTmtUcUtvNmsxcHNaV0V4QVV4T2liUm42YzhJUThBNGNPZ0EyaDlwMWRMM3REamFPaWJSaWFFRjBLUUxEY1JlcXpZdFpmWm9BMDlCdnBpYlpRaWJ3ekhxOWZRLzY0MA?x-oss-process=image/format,png#pic_center">
<meta property="article:published_time" content="2024-03-17T05:03:32.000Z">
<meta property="article:modified_time" content="2024-03-17T05:07:17.368Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/20200802200250982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
  
<meta name="generator" content="Hexo 7.1.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
        
          <a class="nav-icon" href="/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
        
        <a class="nav-icon nav-search-btn" title="Search"><span class="fa fa-search"></span></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-第一篇Hexo-blog文章" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2024/03/17/%E7%AC%AC%E4%B8%80%E7%AF%87Hexo-blog%E6%96%87%E7%AB%A0/" class="article-date">
  <time class="dt-published" datetime="2024-03-17T05:03:32.000Z" itemprop="datePublished">2024-03-17</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      第一篇Hexo blog文章
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h1 id="Hexo-gitee：30分钟搭建一个自己的个人博客网站-欢迎友链呀＜-▰˘◡˘▰"><a href="#Hexo-gitee：30分钟搭建一个自己的个人博客网站-欢迎友链呀＜-▰˘◡˘▰" class="headerlink" title="Hexo+gitee：30分钟搭建一个自己的个人博客网站 欢迎友链呀＜(▰˘◡˘▰)"></a>Hexo+gitee：30分钟搭建一个自己的个人博客网站 欢迎友链呀＜(▰˘◡˘▰)</h1><p>分类专栏： <a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_42365530/category_9833463.html">项目实战篇</a> 文章标签： <a target="_blank" rel="noopener" href="https://so.csdn.net/so/search/s.do?q=git&t=all&o=vip&s=&l=&f=&viparticle=">git</a> <a target="_blank" rel="noopener" href="https://so.csdn.net/so/search/s.do?q=Hexo&t=all&o=vip&s=&l=&f=&viparticle=">Hexo</a> <a target="_blank" rel="noopener" href="https://so.csdn.net/so/search/s.do?q=nodejs&t=all&o=vip&s=&l=&f=&viparticle=">nodejs</a></p>
<p>本文链接：<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_42365530/article/details/107750003">https://blog.csdn.net/weixin_42365530&#x2F;article&#x2F;details&#x2F;107750003</a></p>
<p>订阅专栏</p>
<p><img src="https://img-blog.csdnimg.cn/20200802200250982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<hr>
<h3 id="Hexo-Gitee-部署自己的个人博客"><a href="#Hexo-Gitee-部署自己的个人博客" class="headerlink" title="Hexo + Gitee 部署自己的个人博客"></a><a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=Hexo&spm=1001.2101.3001.7020">Hexo</a> + Gitee 部署自己的个人博客</h3><p>  目前市场上比较火的一些博客框架： <strong>Hexo、jekyll、Solo、Halo 、gohugo、VuePress、wordpress</strong> 等等 ，这些都是开源的静态博客框架（没有登录注册，后台管理等等）好处就是能够非常快速的搭建好自己的个人博客（也是要一定前端知识的），也是因为我之前的blog网站实在没票子继续维护服务器了~~</p>
<p>  我这里就使用 Hexo 框架搭建了，因为 Hexo 要求的环境我电脑都装有，网上关于Hexo的生态也比较丰富完善。可以看 <strong>B站羊哥（CodeSheep）</strong> 的视频就有介绍，我没有写详细的地方，百度一下资料也多得不得了</p>
<p>  先看下我爆肝3天的结果吧（一天根据官方文档查资料搭建好，两天魔改页面和解决图床问题）：地址：<a target="_blank" rel="noopener" href="http://vogos.cn/">http://vogos.cn/</a></p>
<p>Hexo+<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=gitee&spm=1001.2101.3001.7020">gitee</a>：30分钟搭建一个自己的个人博客网站 欢迎友链呀＜(▰˘◡˘▰)</p>
<hr>
<h3 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h3><p>  项目最终是部署到码云上，不需要自己再购买服务器，这里也可以部署到 <strong>github</strong>， 但是我们大天国有一堵墙， 用 <strong>github</strong> 那速度着实让人着急！</p>
<p><strong>1、安装 Node.js 环境：</strong> 因为 Hexo 是基于Node.js 的博客框架，就像 Java 要依赖 JDK 环境一样。</p>
<ul>
<li>node下载地址：<a target="_blank" rel="noopener" href="http://nodejs.cn/download/">http://nodejs.cn/download/</a> ，傻瓜式安装，这里不再详述</li>
</ul>
<p><strong>NodeJS环境安装重点拓展：</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 确认node.js安装成功：运行下面两个命令打印版本号即可</span></span><br><span class="line">node -v</span><br><span class="line">npm  -v</span><br><span class="line"></span><br><span class="line"><span class="comment"># 安装 Node.js 淘宝镜像加速器 （cnpm）</span></span><br><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line"><span class="comment"># 修改 node 类库默认安装位置</span></span><br><span class="line"><span class="comment"># 默认是在 C:\Users\lingStudy\AppData\Roaming\npm</span></span><br><span class="line"></span><br><span class="line">npm config <span class="built_in">set</span> prefix <span class="string">&quot;D:\nodejs安装路径\node_global&quot;</span></span><br><span class="line">npm config <span class="built_in">set</span> cache <span class="string">&quot;D:\nodejs安装路径\node_cache&quot;</span></span><br><span class="line"><span class="comment"># 查看修改是否成功</span></span><br><span class="line">npm root -g</span><br><span class="line"><span class="comment"># 然后把D:\install\node\node_global配置到环境变量的 PATH 下即可</span></span><br></pre></td></tr></table></figure>

<p><strong>2、安装版本控制工具 Git ：</strong> 用来将本地项目托管到码云，所以还需要自己注册一个码云的账号</p>
<p>下载地址：<a target="_blank" rel="noopener" href="https://git-scm.com/download">https://git-scm.com/download</a> 学程序的，在工作中 Git 是必知必会的，还没学的建议去看看，所以这里不再详细介绍 Git</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Git一些重要配置</span></span><br><span class="line">git config --global user.name <span class="string">&quot;lxxxxdy&quot;</span>  <span class="comment">#码云用户名</span></span><br><span class="line">git config --global user.email <span class="string">&quot;xxx83@qq.com&quot;</span>   <span class="comment">#邮箱</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 生成SSH公钥并添加到码云，实现免密码登录</span></span><br><span class="line"><span class="comment"># 1、生成公钥</span></span><br><span class="line">ssh-keygen -t rsa</span><br><span class="line"><span class="comment"># 2、进入 C:\Users\主机名\.ssh 目录，把 id_rsa.pub 里面的信息复制到码云的 SSH公钥 中即可</span></span><br></pre></td></tr></table></figure>

<p><strong>Hexo 官网：</strong> <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">https://hexo.io/zh-cn/</a><br><img src="https://img-blog.csdnimg.cn/20200802200636724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h3 id="Hexo安装"><a href="#Hexo安装" class="headerlink" title="Hexo安装"></a>Hexo安装</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 全局安装</span></span><br><span class="line">npm install hexo-cli -g</span><br><span class="line"><span class="comment"># 查看hexo版本</span></span><br><span class="line">hexo -v</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802200739294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h3 id="创建本地博客站点"><a href="#创建本地博客站点" class="headerlink" title="创建本地博客站点"></a>创建本地博客站点</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 初始化一个项目，hexoblog 是项目名</span></span><br><span class="line">hexo init  hexoblog</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802200820716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 1、进入hexoblog项目目录</span></span><br><span class="line"><span class="built_in">cd</span> hexoblog</span><br><span class="line"><span class="comment">#/2、安装 hexoblog 项目的依赖包</span></span><br><span class="line">npm install</span><br><span class="line"><span class="comment">#/3、启动 hexoblog 项目服务</span></span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802200859628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>此时，访问 <a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a> 即可看到 hexo 默认的页面和一篇“Hello World”默认生成的文章<br><img src="https://img-blog.csdnimg.cn/20200802200937295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>至此，Hexo 项目搭建成功！</p>
<blockquote>
<p>项目主要文件目录介绍：</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── .deploy       <span class="comment"># 需要部署的文件</span></span><br><span class="line">├── node_modules  <span class="comment"># 项目所有的依赖包和插件</span></span><br><span class="line">├── public        <span class="comment"># 生成的静态网页文件</span></span><br><span class="line">├── scaffolds     <span class="comment"># 文章模板</span></span><br><span class="line">├── <span class="built_in">source</span>        <span class="comment"># 博客正文和其他源文件等都应该放在这里</span></span><br><span class="line">|   ├── _drafts   <span class="comment"># 草稿</span></span><br><span class="line">|   └── _posts    <span class="comment"># 文章</span></span><br><span class="line">├── themes        <span class="comment"># 主题</span></span><br><span class="line">├── _config.yml   <span class="comment"># 全局配置文件</span></span><br><span class="line">└── package.json  <span class="comment"># 项目依赖信息</span></span><br></pre></td></tr></table></figure>

<h3 id="新建一篇blog文章"><a href="#新建一篇blog文章" class="headerlink" title="新建一篇blog文章"></a>新建一篇blog文章</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 新建一篇名为 第一篇Hexo blog文章 的文章</span></span><br><span class="line">hexo new <span class="string">&quot;第一篇Hexo blog文章&quot;</span></span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802201048569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>  之后，就可以直接编辑刚刚新建的文章，再次启动服务查看效果，如下，这里有一个问题，Hexo框架文章中的图片只支持外链的形式，有很多方法解决，比如，可以在码云或者七牛云部署一个自己的图床。<br><img src="https://img-blog.csdnimg.cn/20200802201113758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h3 id="将项目部署到码云"><a href="#将项目部署到码云" class="headerlink" title="将项目部署到码云"></a>将项目部署到码云</h3><p>1、在码云新建一个仓库，注意标红的地方，这里我的码云用户名为 <strong>lingstudy</strong><br><img src="https://img-blog.csdnimg.cn/20200802201146107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>2、在项目根目录下安装git部署插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 之后就可以使用 hexo deploy（或简写 hexo d）将项目部署到gitee远程仓库</span></span><br><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802201219532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>3、修改项目配置文件：<strong>_config.yml</strong>，在最下面，修改如下内容</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></span><br><span class="line">deploy:</span><br><span class="line">  <span class="built_in">type</span>: git</span><br><span class="line">  repo: 仓库URL地址</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/2020080220131539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>4、使用命令 <strong>hexo d</strong> 将项目部署到 gitee 远程仓库，此时本地文件夹中出现有一个public文件夹。<br><img src="https://img-blog.csdnimg.cn/20200802201344312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>5、开启 Gitee Pages 静态网页托管服务<br><img src="https://img-blog.csdnimg.cn/20200802201407831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>之后使用提供的网址即可访问博客，每次重新上传代码到gitee时，都需要点击下图的更新按钮<strong>重启page服务</strong><br><img src="https://img-blog.csdnimg.cn/202008022014338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>访问生成的网址 <a target="_blank" rel="noopener" href="https://lingstudy.gitee.io/">https://lingstudy.gitee.io/</a> ，部署成功！<br><img src="https://img-blog.csdnimg.cn/20200802201510794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h3 id="修改主题"><a href="#修改主题" class="headerlink" title="修改主题"></a>修改主题</h3><p>官网主题：<a target="_blank" rel="noopener" href="https://hexo.io/themes/">https://hexo.io/themes/  
</a><br>可以去官网找自己喜欢的主题，下载下来，我这里就随便拿一个来演示了</p>
<p>1、进入所下载主题根目录下的 theme 目录，将里面的文件复制到自己项目的 theme 目录下<br><img src="https://img-blog.csdnimg.cn/2020080220154554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>2、修改根目录下的配置文件 <strong>_config.yml</strong><br><img src="https://img-blog.csdnimg.cn/20200802201608536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>3、启动项目，访问：<a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a> 先在本地查看主题是否修改成功<br><img src="https://img-blog.csdnimg.cn/20200802201649173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>4、将修改后的项目部署到远程仓库</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 生成静态网站文件</span></span><br><span class="line">hexo g  </span><br><span class="line"><span class="comment"># 上传到远程仓库</span></span><br><span class="line">hexo d  </span><br><span class="line"></span><br><span class="line"><span class="comment"># 1、清除 hexo 的缓存</span></span><br><span class="line">hexo clean</span><br><span class="line"><span class="comment"># 2、采用一键部署</span></span><br><span class="line">hexo g --d</span><br></pre></td></tr></table></figure>

<p><img src="https://img-blog.csdnimg.cn/20200802201726963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>5、访问 <a target="_blank" rel="noopener" href="https://lingstudy.gitee.io/">https://lingstudy.gitee.io/</a> 主题样式修改并部署成功！</p>
<p><strong>（这里若出现样式错乱，可能是浏览器缓存问题，执行 Ctrl + F5 强制刷新一下即可）</strong><br><img src="https://img-blog.csdnimg.cn/20200802201812780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2NTUzMA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>至此，Hexo + Gitee 部署自己的个人博客完成！</p>
<h3 id="拓展：快速编写文章"><a href="#拓展：快速编写文章" class="headerlink" title="拓展：快速编写文章"></a>拓展：快速编写文章</h3><p>新建文章时每次都要执行 <strong>hexo new “blogName”</strong> 命令很麻烦</p>
<p>可以直接到根目录 &#x2F;source&#x2F;_posts 目录下，创建一个.md 文件进行编写，在文件的顶部添加下面内容就可以了，主要写一个 title 就好了，其他都可以省略</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 文章名称</span><br><span class="line"><span class="built_in">date</span>: 2020-07-30 16:46:07(创建时间)</span><br><span class="line">tags: 标签名</span><br><span class="line">categories: 分类</span><br><span class="line">description: 描述</span><br><span class="line">comments: 是否开启评论(<span class="literal">true</span> or <span class="literal">false</span>)</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>之后，使用 <strong>hexo g –d</strong> 命令推送到 gitee上，并在 gitee 上更新一下 Gitee Pages 服务即可</p>
<hr>
<h3 id="END"><a href="#END" class="headerlink" title="END"></a>END</h3><p>  为什么一定要有一个自己的个人博客？我一直认为坚持写优质的blog文章，是提升和巩固自身能力的重要方法之一！<br>  我的现在这个效果，是花了大量时间去修改和配置了的，其实搭这种blog对提升技术不会有太大帮助，因为用的是已经写好的框架(模板)，可我就是用不爽默认的样式虽然不是走前端的。<strong>最后，搭建好了欢迎到留言区互留友链~</strong></p>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9OTmtUcUtvNmsxcHNaV0V4QVV4T2liUm42YzhJUThBNGNpYnkzZE5Pek1qaWM1MlhCeDZIeDk1QkxMT3JYWUZveUNaUEhQcWRnYjU0WGVhNlBvaWJ4Ym1vd0EvNjQw?x-oss-process=image/format,png#pic_center" alt="在这里插入图片描述"></p>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9OTmtUcUtvNmsxcHNaV0V4QVV4T2liUm42YzhJUThBNGNPZ0EyaDlwMWRMM3REamFPaWJSaWFFRjBLUUxEY1JlcXpZdFpmWm9BMDlCdnBpYlpRaWJ3ekhxOWZRLzY0MA?x-oss-process=image/format,png#pic_center" alt="在这里插入图片描述"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2024/03/17/%E7%AC%AC%E4%B8%80%E7%AF%87Hexo-blog%E6%96%87%E7%AB%A0/" data-id="cltv1xnni0000gcu6ay3a592m" data-title="第一篇Hexo blog文章" class="article-share-link"><span class="fa fa-share">Share</span></a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/2024/03/17/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Hello World</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2024/03/">March 2024</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2024/03/17/%E7%AC%AC%E4%B8%80%E7%AF%87Hexo-blog%E6%96%87%E7%AB%A0/">第一篇Hexo blog文章</a>
          </li>
        
          <li>
            <a href="/2024/03/17/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2024 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.6.4.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>